<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<!-- 
  占位符语法：
      {{ 数据 }}

  绝大多数情况下，渲染数据都是要遍历数组

  模板有遍历的语法
  {{each $data as value}}
    模板结构
  {{/each}}

  模板的if语法
  {{if 条件 }}
    静态模板
  {{elseif 条件 }}
    静态模板
  {{else }}
    静态模板
  {{/if}}

 -->

<body>
  <table id="tb"></table>
  <script src="./uesrMgr/js/art-template-web.js"></script>
  <!-- 写模板 -->
  <script type="text/tempalate" id="app">
    {{each $data value}}
      <tr>
        <th scope="row">{{ value.id }}</th>
        <td><img src="
          {{if value.head == ''}}
          uesrMgr/assets/img/icon-40.png
          {{else}}
          {{value.head}}
          {{/if}}
        " class="rounded" alt="张三"></td>
        <td>{{ value.name }}</td>
        <td>{{ value.gender }}</td>
        <td>{{ value.birthday }}</td>
        <td class="text-center">
          <a href="edit.html" class="btn btn-info btn-sm">编辑</a>
          <a href="del.html" class="btn btn-danger btn-sm">删除</a>
        </td>
      </tr>
    {{/each}}
  </script>

  <script>
    // var data = { "id": "1", "head": "./assets/img/icon-01.png", "name": "狗蛋", "gender": "男", "birthday": "1998-11-16" };

    var data = [{"id":"1","head":".\/assets\/img\/icon-01.png","name":"狗蛋","gender":"男","birthday":"1998-11-16"},{"id":"2","head":"","name":"阿珍","gender":"女","birthday":"1997-11-16"},{"id":"3","head":"","name":"狗蛋3","gender":"女","birthday":"2000-08-02"},{"id":"4","head":"","name":"goudan","gender":"女","birthday":"1999-02-02"},{"id":"5","head":"","name":"二狗","gender":"男","birthday":"2000-11-02"},{"id":"6","head":"","name":"","gender":"","birthday":"0000-00-00"},{"id":"7","head":"","name":"胖墩","gender":"男","birthday":"1988-11-16"},{"id":"8","head":"assets\/img\/2018-11-16-16-29-4316826.png","name":"胖妞","gender":"女","birthday":"1999-11-01"}]
    // 导入数据
    var res = template("app", data);
    console.log(res);

    document.getElementById('tb').innerHTML = res;

  </script>
</body>

</html>